<template>
	<view>
		帖子发布
		<u--form 
				:model="post"
				ref="postForm"
		>
			<u-form-item label="标题" prop="title" >
				<u--input v-model="post.title"></u--input>
			</u-form-item>
			
			<u-form-item label="详情" prop="detail" >
				<u-textarea v-model="post.detail"></u-textarea>
			</u-form-item>
			
			<view class="u-demo-block__content">
				<view class="u-page__tag-item" v-for="(tag, index) in tagList" :key="index">
					<u-tag :text="tag.name" :plain="!tag.checked" :type="tag.type" :name="index"
						@click="checkboxClick">
					</u-tag>
				</view>
			</view>
		</u--form>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				post: {
					title: '',
					detail: '',
				},
				postRules: {
					'post.title': {
						type: 'string',
						required: true,
						message: '请填写标题',
						trigger: ['blue', 'change']
					}
				},
				
				tagList: [
					{
						id: '1',
						name: '包吃',
						type: 'primary',
						size: 30,
						shape: 'square',
						checked: false
					},
					{
						id: '2',
						name: '包注',
						type: 'primary',
						size: 30,
						shape: 'square',
						checked: false
					},
					{
						id: '3',
						name: '报纸',
						type: 'primary',
						size: 30,
						shape: 'square',
						checked: false
					}
				]
			}
		},
		onReady() {
			this.$refs.postForm.setRules(this.postRules)
		},
		methods: {
			checkboxClick(name) {
				this.tagList[name].checked = !this.tagList[name].checked
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-page__tag-item {
		margin-right: 20px;
	}

	.u-demo-block__content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		
		padding: 10px 0;
	}
</style>
